<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缩放和旋转的动画效果</title>
<script src="../JS/vue.js"></script>


</head>
<body>
<style type="text/css">
p{
	font: 30px "微软雅黑";/*设置字体和字体大小*/
	margin:50px auto; /*设置元素外边距*/
	font-weight: 500; /*设置字体粗细*/
	color: #f35626;/*设置文字颜色*/
}
/* 设置元素的缩放转换 */
@keyframes scaling {
  	0% {
    	transform: scale(0);
  	}
  	50% {
    	transform: scale(1.2);
  	}
  	100% {
    	transform: scale(1);
  	}
}
/*创建旋转动画*/
@-webkit-keyframes rotate{
   0%{
      -webkit-transform:rotateZ(0) scale(1);
   }50%{
      -webkit-transform:rotateZ(360deg) scale(0.5);
   }100%{
      -webkit-transform:rotateZ(720deg) scale(0);
   }
}
</style>
<div id="example" align="center">
	<button v-on:click="show = !show">切换显示</button>
	<transition 
	v-on:enter="enter"
    v-on:leave="leave"
	v-on:after-leave="afterLeave"
    >
		<p v-if="show">勤能补拙</p>
	</transition>
</div>
<script type="text/javascript">
//创建根实例
var vm = new Vue({
	el : '#example',
	data : {
		show : false
	},
	methods: {
		enter: function (el, done) {
			el.style.opacity = 1;
			el.style.animation= 'scaling 1s';//实现缩放效果
			done();
		},
		leave: function (el, done) {
			el.style.animation= 'rotate 2s linear';//实现旋转效果
			setTimeout(function(){
              	done();
            }, 1900)
		},
		//在leave函数中触发回调后执行afterLeave函数
		afterLeave: function (el) {
			el.style.opacity = 0;
		}
  	}
});
</script>













</body>
</html>